<!--
 * @Author: your name
 * @Date: 2021-11-10 15:29:01
 * @LastEditTime: 2021-11-15 14:36:07
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\admin\src\views\home\articleAdmin\index.vue
-->
<template>
  <div class="tag-box">
    <div class="tag-wrapper">
      <div class="left-tag">
        <el-card class="box-card add-card">
          <div slot="header" class="clearfix">
            <span>{{ isAdd ? "添加标签" : "管理标签" }}</span>
          </div>
          <el-input v-model="text" placeholder="请输入标签名称"></el-input>
          <el-input
            v-model="value"
            placeholder="请输入分类值(请输入英文,作为路由使用)"
          ></el-input>
          <div>
            <template v-if="isAdd">
              <div>
                <el-button type="primary" @click="addTag()" class="handler-btn"
                  >保存</el-button
                >
              </div>
            </template>
            <template v-else>
              <div class="handler-box">
                <div>
                  <el-button
                    type="primary"
                    class="handler-btn"
                    @click="editTag()"
                    >更新</el-button
                  >
                  <el-button class="back-btn" plain @click="backHandler()"
                    >返回添加</el-button
                  >
                </div>
                <div>
                  <el-popconfirm title="确定删除吗？" @confirm="delTag()">
                    <button class="del-btn" slot="reference" type="text">
                      删除
                    </button>
                  </el-popconfirm>
                </div>
              </div>
            </template>
          </div>
        </el-card>
      </div>
      <div class="right-tag">
        <el-card class="box-card all-card">
          <div slot="header" class="clearfix">
            <span>所有标签</span>
          </div>
          <el-button
            v-for="item in tagList"
            :key="item.id"
            @click="echoData(item)"
          >
            {{ item.text }}
          </el-button>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../../../api";
export default {
  data() {
    return {
      delId: null,
      isAdd: true, //是否为添加
      text: "", //分类名称
      value: "", //分类值
      tagList: [], //分类列表
    };
  },
  methods: {
    //获取分类列表
    getTagList() {
      api.getTagList().then((res) => {
        if (res.success) {
          //赋值下拉框数据
          this.tagList = res.data;
        }
      });
    },
    //添加分类
    async addTag() {
      if (this.value && this.text) {
        const res = await api.addTagList({
          text: this.text,
          value: this.value,
        });
        if (!res.data) {
          //重新渲染
          this.getTagList();
          this.backHandler();
          //提示信息
          this.$message({
            message: "保存成功",
            type: "success",
          });
        } else {
          //提示信息
          this.$message({
            message: res.data.message,
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "输入框不得为空",
          type: "warning",
        });
      }
    },
    //回显数据
    async echoData(data) {
      this.text = data.text;
      this.value = data.value;
      //切换内容
      this.isAdd = false;
      //删除id
      this.delId = data.id;
    },
    //返回操作
    backHandler() {
      this.isAdd = true;
      this.text = "";
      this.value = "";
    },
    async delTag() {
      const res = await api.delTagList({ id: this.delId });
      //判断是否成功
      if (res.success) {
        //重新渲染
        this.getTagList();
        //成功提示
        this.$message.success("删除成功");
        this.backHandler();
      }
    },
    //更新
    async editTag() {
      const res = await api.editTagList({
        id: this.delId,
        text: this.text,
        value: this.value,
      });
      if (!res.data) {
        //重新渲染
        this.getTagList();
        this.backHandler();
        //提示信息
        this.$message({
          message: "保存成功",
          type: "success",
        });
      } else {
        //提示信息
        this.$message({
          message: res.data.message,
          type: "warning",
        });
      }
    },
  },

  created() {
    //获取分类列表
    this.getTagList();
  },
};
</script>

<style lang="scss">
.tag-box {
  width: 100%;
  height: 100%;
}
.tag-wrapper {
  width: 95%;
  margin: 0 auto;
  display: flex;
  .right-tag {
    flex: 1;
  }
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.add-card {
  width: 470px;
  margin-top: 20px;
  margin-right: 15px;
  .handler-btn {
    padding: 6px 16px;
    line-height: normal;
    background-color: #0188fb;
    border-radius: 2px;
    margin-top: 10px;
  }
  .back-btn {
    padding: 6px 16px;
    line-height: normal;
    margin-left: 0px;
    border: 1px dotted #ccc;
  }
}
.all-card {
  width: 100%;
  margin-top: 20px;
  .el-button {
    padding: 2px 16px;
    line-height: normal;
    border-radius: 0;
  }
}
.el-input {
  margin: 15px 0;
  input {
    height: 35px;
  }
}
.handler-box {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  .del-btn {
    padding: 6px 16px;
    background-color: #fff;
    border: 1px solid #f56c6c;
    color: #f56c6c;
    border-radius: 2px;
    cursor: pointer;
  }
  .del-btn:hover {
    border: 1px solid #f77979;
    color: #f77979;
  }
}
</style>
